<template>

    <div id="app">
        
        <div class="app">
            <div class="nav">
                <p class="p1">演出</p>
                <p>大咖</p>
                <p>品牌</p>
                <p class="iconfont icon-sousuo p2" c></p>

            </div>
        </div>
        <div class="banner">
            <ul class="ul1" >
                <li v-for="(faction,index) in Name" :key="index"><span>{{faction.name}}</span></li>
              
                <!-- console.log(list) -->
            </ul>
        </div>
        <div class="addres">
            <p class="p1">
                <span>西安</span>
                <span>全部时间</span>
            </p>
            <p class="p2">
                <span class="span1">推荐</span>
                <span>距离</span>
                <span>上新</span>
            </p>

        </div>
    </div>
</template>

<script>
    import axios from "axios";


export default {
  name: "classification",
  data() {
    return {
      Name: []
    };
  },

  created() {
        //发送请求获取分类列表

        //   let http = new XMLHttpRequest();
        //     http.open("get", " http://localhost:3000/hot");
        //     http.send();
        //     http.onreadystatechange = () => {
        //       if (http.readyState === 4) {
        //         this.List = JSON.parse(http.responseText);
        //         console.log( this.List)
        //       }
        //     };

   //name  小写

        axios({
        url: "/name",
        params: {
            // type: "hot"
        }
        }).then(res => (this.Name = res.data));
        console.log("this.Name", this.Name);
  }
};
</script>

<style scoped>
@import url(../../font_936mz6royw6/iconfont.css);
#app {
  width: 100%;
  height: 1.3rem;
  /* background-color: blue; */
}
.app {
  width: 100%;
  background-color: palegoldenrod;
  height: 0.4rem;
}
.nav {
  display: flex;
  /* background: hotpink; */
  width: 100%;
  margin-left: 10%;
  justify-content: space-around;
  align-items: center;
}
.nav p {
  width: 20%;
  margin: 0px auto;
  text-align: center;
  font-size: 0.15rem;
  line-height: 0.3rem;
  /* text-align: left; */
}
.nav .p1 {
  border-bottom: 3px solid palevioletred;
  font-size: 0.2rem;
}
.nav .p2 {
  text-align: left;
}
.banner {
  height: 0.5rem;
  width: 100%;
  overflow: auto;
  background-color: honeydew;
}
.banner .ul1 {
  width: 200%;
  display: flex;
  justify-content: space-around;
}
.banner .ul1 li {
  float: left;
  margin: 0rem 0.1rem;
  line-height: 0.5rem;
  font-size: 0.15rem;
}
.addres {
  /* width: 100%; */
  display: flex;
  height: 0.3rem;
  align-items: center;
  justify-content: space-between;
  padding: 0rem 0.2rem;
  font-size: 0.15rem;
}
.addres p {
  font-size: 0.1rem;
  display: flex;
  width: 35%;
  justify-content: space-between;
}

.addres .p2 {
  height: 0.2rem;
  background: #eee;
  border-radius: 0.1rem;
  line-height: 0.2rem;
}

.addres .p2 .span1 {
  background-color: #fff;
  padding: 0rem 0.05rem;
  border-radius: 0.1rem;
  border: 1px solid #ccc;
  height: 0.19rem;
  display: inline-block;
}
</style>
